<template>
  <div>
    <div v-if="id == 1">
      <svg :id="'s' +1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
           version="1.1" width="62" height="62" viewBox="0 0 62 62">
        <g>
          <g>
            <rect x="0" y="0" width="62" height="62" rx="12" fill="#FF5C5C" fill-opacity="1"/>
          </g>
          <g>
            <path
              d="M47,21.1835C47,19.4253,45.5673,17.999999271355,43.8,18L18.2,18C16.43269,17.999999271355,15,19.4253,15,21.1835L15,40.2845C15,42.042699999999996,16.43269,43.468,18.2,43.468L43.8,43.468C45.5673,43.468,47,42.042699999999996,47,40.2845L47,21.1835ZM27.8,37.8969C27.8,38.3364,27.4418,38.6927,27,38.6927L22.2,38.6927C21.75817,38.6927,21.4,38.3364,21.4,37.8969L21.4,36.305099999999996C21.4,35.8656,21.75817,35.5092,22.2,35.5092L27,35.5092C27.4418,35.5092,27.8,35.8656,27.8,36.305099999999996L27.8,37.8969ZM43.8,29.9381C43.8,30.3777,43.4418,30.734,43,30.734L19,30.734C18.55817,30.734,18.2,30.3777,18.2,29.9381L18.2,26.75462C18.2,26.31507,18.55817,25.95874,19,25.95874L43,25.95874C43.4418,25.95874,43.8,26.31507,43.8,26.75462L43.8,29.9381Z"
              fill="#FFFFFF" fill-opacity="1"/>
          </g>
        </g>
      </svg>
    </div>
    
    <div v-if="id == 2">
      <svg :id="'s' +2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
           version="1.1" width="62" height="62" viewBox="0 0 62 62">
        <defs>
          <clipPath id="master_svg0_25_577">
            <rect x="16" y="16" width="30" height="30.000001907348633" rx="0"/>
          </clipPath>
        </defs>
        <g>
          <g>
            <path
              d="M0,50L0,12C0,5.37258,5.37258,0,12,0L50,0C56.6274,0,62,5.37258,62,12L62,50C62,56.6274,56.6274,62,50,62L12,62C5.37258,62,0,56.6274,0,50Z"
              fill="#26CB41" fill-opacity="1"/>
          </g>
          <g clip-path="url(#master_svg0_25_577)">
            <g>
              <path
                d="M16,25.36938C16.00310234,20.1961,20.1961,16.00310193,25.36938,16L36.6306,16C41.8039,16.00310327,45.9969,20.1961,46,25.36938L46,36.6306C45.9969,41.8039,41.8039,45.9969,36.6306,46L25.36938,46C20.1961,45.9969,16.0031031,41.8039,16,36.6306L16,25.36938ZM39.5781,28.7725L32.4869,22.55875C31.570700000000002,21.81581,30.2603,21.81269,29.340600000000002,22.55125L22.25313,28.7556C21.99217,29.0492,21.92621,29.468,22.08425,29.8276C22.24229,30.1872,22.59536,30.421799999999998,22.988129999999998,30.4281L25.07688,30.4281L25.07688,36.9006C25.07688,37.832499999999996,25.77813,38.5206,26.7081,38.5206L35.11,38.5206C36.0167,38.5466,36.7601,37.807500000000005,36.7394,36.9006L36.7394,30.4281L38.8525,30.4281L38.8525,30.4244C39.234,30.4053,39.572,30.1723,39.7256,29.8226C39.8792,29.4729,39.8221,29.0664,39.5781,28.7725ZM34.716300000000004,30.6981L31.78,30.6981L31.78,32.1738L34.7162,32.1738C35.121300000000005,32.1738,35.447500000000005,32.5019,35.447500000000005,32.9106C35.448499999999996,33.3161,35.121700000000004,33.6463,34.7162,33.6494L31.78,33.6494L31.78,35.370599999999996C31.760199999999998,35.7616,31.4374,36.0685,31.0459,36.0685C30.654400000000003,36.0685,30.3316,35.7616,30.3119,35.370599999999996L30.3119,33.6494L27.3756,33.6494C26.9681,33.6494,26.6378,33.319,26.6378,32.9116C26.6378,32.5041,26.9681,32.1738,27.3756,32.1738L30.3119,32.1738L30.3119,30.6981L27.377499999999998,30.6981C26.97,30.6981,26.639699999999998,30.367800000000003,26.639699999999998,29.9603C26.639699999999998,29.552799999999998,26.97,29.2225,27.377499999999998,29.2225L29.1512,29.2225L27.2556,27.3138C26.968400000000003,27.024900000000002,26.968400000000003,26.5583,27.2556,26.269399999999997C27.5419,25.98302,28.0062,25.98302,28.2925,26.269399999999997L30.9831,28.9788L33.6756,26.269399999999997C33.9615,25.98198,34.4266,25.98198,34.7125,26.269399999999997C34.999700000000004,26.5583,34.999700000000004,27.024900000000002,34.7125,27.3138L32.816900000000004,29.2225L34.716300000000004,29.2225C35.121300000000005,29.2225,35.447500000000005,29.552500000000002,35.447500000000005,29.959400000000002C35.449600000000004,30.365299999999998,35.1222,30.6961,34.716300000000004,30.6981Z"
                fill="#FFFFFF" fill-opacity="1"/>
            </g>
          </g>
        </g>
      </svg>
    </div>
    
    <div v-if="id == 3">
      <svg :id="'s' +3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
           version="1.1" width="62" height="62" viewBox="0 0 62 62">
        <defs>
          <clipPath id="master_svg0_25_592">
            <rect x="15" y="15" width="32" height="32.000003814697266" rx="0"/>
          </clipPath>
        </defs>
        <g>
          <g>
            <rect x="0" y="0" width="62" height="62" rx="12" fill="#44B7FF" fill-opacity="1"/>
          </g>
          <g clip-path="url(#master_svg0_25_592)">
            <g>
              <path
                d="M43.6879,25.5C44.4126,25.5,45,26.09503,45,26.82885L45,43.1712C45,43.905100000000004,44.4126,44.5,43.6879,44.5L39.906,44.5C39.1814,44.5,38.594,43.905100000000004,38.594,43.1712L38.594,26.82885C38.594,26.09503,39.1813,25.5,39.906,25.5L43.6879,25.5ZM29.093899999999998,29.3384C29.8185,29.3384,30.406,29.9333,30.406,30.667299999999997L30.406,43.171099999999996C30.406,43.905,29.8186,44.5,29.093899999999998,44.5L25.312060000000002,44.5C24.58744,44.5,24,43.905100000000004,24,43.171099999999996L24,30.667299999999997C24,29.9333,24.58738,29.3384,25.312060000000002,29.3384L29.093899999999998,29.3384ZM36.1887,33.2341C36.894999999999996,33.2341,37.467600000000004,33.8137,37.467600000000004,34.5286L37.467600000000004,43.205600000000004C37.467600000000004,43.920500000000004,36.894999999999996,44.5,36.1887,44.5L32.5028,44.5C31.7965,44.5,31.224,43.920500000000004,31.224,43.205600000000004L31.224,34.5286C31.224,33.8137,31.7965,33.2341,32.5028,33.2341L36.1887,33.2341ZM21.96481,36.456199999999995C22.671129999999998,36.456199999999995,23.24359,37.035799999999995,23.24359,37.7508L23.24359,43.205600000000004C23.24359,43.920500000000004,22.67109,44.5,21.96481,44.5L18.27888,44.5C17.572625,44.5,17,43.920500000000004,17,43.2055L17,37.7508C17,37.035799999999995,17.572563,36.456199999999995,18.27888,36.456199999999995L21.96481,36.456199999999995ZM19.34519,31.444499999999998C18.96968,31.8266,18.35392,31.8266,17.978406,31.444499999999998C17.600906,31.0624,17.600906,30.442999999999998,17.978313,30.0609L26.55041,21.3839C26.925890000000003,21.00181,27.5417,21.00181,27.9172,21.3839L32.856700000000004,26.3839L39.226,19.93659L37.7241,18.416279L43,17.5L42.094899999999996,22.84066L40.5929,21.32022L33.540099999999995,28.459400000000002C33.1646,28.8414,32.5489,28.8414,32.1733,28.459400000000002L27.233800000000002,23.45928L19.34519,31.444499999999998Z"
                fill="#FFFFFF" fill-opacity="1"/>
            </g>
          </g>
        </g>
      </svg>
    </div>
    
    <div v-if="id == 4">
      <svg :id="'s' +4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
           version="1.1" width="62" height="62" viewBox="0 0 62 62">
        <defs>
          <clipPath id="master_svg0_25_572">
            <rect x="16" y="16" width="30.000001907348633" height="30" rx="0"/>
          </clipPath>
        </defs>
        <g>
          <g>
            <rect x="0" y="0" width="62" height="62" rx="12" fill="#5C6CFF" fill-opacity="1"/>
          </g>
          <g clip-path="url(#master_svg0_25_572)">
            <g>
              <path
                d="M16,25.36938C16.00310234,20.1961,20.1961,16.00310193,25.36938,16L36.6306,16C41.8039,16.00310327,45.9969,20.1961,46,25.36938L46,36.6306C45.9969,41.8039,41.8039,45.9969,36.6306,46L25.36938,46C20.1961,45.9969,16.0031031,41.8039,16,36.6306L16,25.36938ZM39.5781,32.5C39.8263,32.207,39.8859,31.7982,39.7316,31.4466C39.5773,31.095,39.2362,30.862000000000002,38.8525,30.8463L38.8525,30.8444L38.8281,30.8444L38.8094,30.8425L36.7375,30.8425L36.7375,24.37188C36.7583,23.46501,36.0149,22.72587,35.1081,22.75188L26.7063,22.75188C25.79952,22.72587,25.05611,23.46501,25.07688,24.37188L25.07688,30.8463L22.988129999999998,30.8463C22.59655,30.855,22.24543,31.0896,22.087519999999998,31.448C21.9296,31.8065,21.99344,32.2239,22.25125,32.5188L29.340600000000002,38.7231C30.261,39.4604,31.5709,39.4565,32.4869,38.7138L39.5781,32.5ZM34.716300000000004,30.6981L31.78,30.6981L31.78,32.1738L34.7162,32.1738C35.121300000000005,32.1738,35.447500000000005,32.5019,35.447500000000005,32.9106C35.448499999999996,33.3161,35.121700000000004,33.6463,34.7162,33.6494L31.78,33.6494L31.78,35.370599999999996C31.760199999999998,35.7616,31.4374,36.0685,31.0459,36.0685C30.654400000000003,36.0685,30.3316,35.7616,30.3119,35.370599999999996L30.3119,33.6494L27.3756,33.6494C26.9681,33.6494,26.6378,33.319,26.6378,32.9116C26.6378,32.5041,26.9681,32.1738,27.3756,32.1738L30.3119,32.1738L30.3119,30.6981L27.377499999999998,30.6981C26.97,30.6981,26.639699999999998,30.367800000000003,26.639699999999998,29.9603C26.639699999999998,29.552799999999998,26.97,29.2225,27.377499999999998,29.2225L29.1512,29.2225L27.2556,27.3138C26.968400000000003,27.024900000000002,26.968400000000003,26.5583,27.2556,26.269399999999997C27.5419,25.98302,28.0062,25.98302,28.2925,26.269399999999997L30.9831,28.9788L33.6756,26.269399999999997C33.9615,25.98198,34.4266,25.98198,34.7125,26.269399999999997C34.999700000000004,26.5583,34.999700000000004,27.024900000000002,34.7125,27.3138L32.816900000000004,29.2225L34.716300000000004,29.2225C35.121300000000005,29.2225,35.447500000000005,29.552500000000002,35.447500000000005,29.959400000000002C35.449600000000004,30.365299999999998,35.1222,30.6961,34.716300000000004,30.6981Z"
                fill="#FFFFFF" fill-opacity="1"/>
            </g>
          </g>
        </g>
      </svg>
    </div>
    
    <div v-if="id == 5">
      <svg :id="'s' +5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
           version="1.1" width="62" height="62" viewBox="0 0 62 62">
        <defs>
          <clipPath id="master_svg0_25_587">
            <rect x="16" y="16" width="30" height="30" rx="0"/>
          </clipPath>
        </defs>
        <g>
          <g>
            <rect x="0" y="0" width="62" height="62" rx="12" fill="#FFAB44" fill-opacity="1"/>
          </g>
          <g clip-path="url(#master_svg0_25_587)">
            <g>
              <path
                d="M27.6869,16.719818L17.46048,16.719818C16.65378,16.720157,15.9999999518967,17.37421,16,18.18091L16,28.408C16.000338343,29.2145,16.65392,29.8684,17.46048,29.8691L27.6869,29.8691C28.493000000000002,29.868000000000002,29.1461,29.2147,29.1468,28.4086L29.1468,18.1803C29.1468,17.37394,28.493299999999998,16.720156,27.6869,16.719818ZM43.7565,32.7919L33.530100000000004,32.7919C32.723,32.7915,32.0686,33.4459,32.069,34.2529L32.069,44.4788C32.069,45.2855,32.7227,45.939499999999995,33.529399999999995,45.9399L43.7565,45.9399C44.5619,45.937799999999996,45.2138,45.2847,45.2145,44.4794L45.2145,34.2511C45.2138,33.4459,44.5617,32.7932,43.7565,32.7919ZM38.6436,28.0962L33.843599999999995,23.29382L38.6436,18.49387L43.4435,23.29444L38.6436,28.095L38.6436,28.0962ZM45.509100000000004,22.26105L39.6794,16.427721C39.1083,15.857425,38.1832,15.857425,37.611999999999995,16.427721L31.7756,22.26105C31.2045,22.83135,31.2045,23.75691,31.7756,24.327199999999998L37.6084,30.1605C38.1793,30.730800000000002,39.1042,30.730800000000002,39.6751,30.1605L45.5048,24.327199999999998C46.0756,23.75677,46.0756,22.83149,45.5048,22.26105L45.509100000000004,22.26105ZM18.19072,43.7485L26.9561,43.7485L26.9561,34.982L18.19072,34.982L18.19072,43.7485ZM27.6857,32.7919L17.46048,32.7919C16.65402,32.7922,16.000339055,33.4459,16,34.252300000000005L16,44.4788C16.000338304,45.2852,16.654019,45.938900000000004,17.46048,45.9392L27.6869,45.9392C28.4931,45.9386,29.1464,45.285,29.1468,44.4788L29.1468,34.2511C29.1461,33.4452,28.492800000000003,32.7922,27.6869,32.7919L27.6857,32.7919Z"
                fill="#FFFFFF" fill-opacity="1"/>
            </g>
          </g>
        </g>
      </svg>
    </div>
    
    <div v-if="id == 6">
      <svg :id="'s' +6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
           version="1.1" width="62" height="62" viewBox="0 0 62 62">
        <g>
          <g>
            <rect x="0" y="0" width="62" height="62" rx="12" fill="#FF5C5C" fill-opacity="1"/>
          </g>
          <g>
            <path
              d="M46.872,43.7107Q46.872,44.356700000000004,46.650999999999996,44.917699999999996Q46.43,45.4787,46.022,45.9037Q45.614000000000004,46.3287,45.07,46.5667Q44.525999999999996,46.8047,43.879999999999995,46.8047L19.196,46.8047Q18.55,46.8047,17.972,46.5667Q17.394,46.3287,16.951999999999998,45.9037Q16.51,45.4787,16.255,44.917699999999996Q15.999999675751,44.356700000000004,16,43.7107L16,26.74473Q16,25.452730000000003,16.901,24.55173Q17.802,23.65073,19.094,23.65073L43.778,23.65073Q45.07,23.65073,45.971000000000004,24.55173Q46.872,25.452730000000003,46.872,26.74473L46.872,31.3687L39.153999999999996,31.3687Q37.861999999999995,31.3687,36.961,32.252700000000004Q36.06,33.136700000000005,36.06,34.4287Q36.094,35.3127,36.434,35.9927Q36.706,36.5707,37.335,37.0467Q37.964,37.5227,39.153999999999996,37.5227L46.872,37.5227L46.872,43.7107ZM42.248000000000005,22.08673L26.811999999999998,22.08673Q28.648,21.13473,30.28,20.25073Q31.708,19.50273,33.102000000000004,18.75473Q34.495999999999995,18.00673,35.278,17.598732Q36.468,16.9527318,37.403,17.00373178Q38.338,17.0547318,38.984,17.326732Q39.732,17.700732,40.275999999999996,18.31273L42.248000000000005,22.08673ZM37.623999999999995,34.4287Q37.623999999999995,33.7827,38.066,33.3407Q38.507999999999996,32.8987,39.153999999999996,32.8987Q39.8,32.8987,40.242000000000004,33.3407Q40.684,33.7827,40.684,34.4287Q40.684,35.0747,40.242000000000004,35.533699999999996Q39.8,35.9927,39.153999999999996,35.9927Q38.507999999999996,35.9927,38.066,35.533699999999996Q37.623999999999995,35.0747,37.623999999999995,34.4287Z"
              fill="#FFFFFF" fill-opacity="1"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
    export default {
        props: {
            id: {
                type: [String, Number],
                default: () => {
                    return 2
                }
            }
        },
        data() {
            return {}
        }
    }
</script>
<style>
  #s1 {
    filter:drop-shadow(0px 7px 8px rgba(255,92,92, 0.33));
   }
  #s2 {
    filter:drop-shadow(0px 7px 8px rgba(38, 203, 65, 0.33));
   }
  #s3 {
    filter:drop-shadow(0px 7px 8px rgba(92, 108, 255, 0.33));
  }
  #s4 {
    filter:drop-shadow(0px 7px 8px rgba(92, 108, 255, 0.38));
  }
  #s5 {
    filter:drop-shadow(0px 7px 8px rgba(175, 70, 54, 0.33));
  }
  #s6 {
    filter:drop-shadow(0px 7px 8px rgba(255,92,92, 0.33));
  }
</style>
